<div class="root-container">
  <div class="row" style="height:40px;">
    <span class="plane-title" [ngStyle]="{color:connStatus?'#4384A6':'#f00'}">CSS设备状态看板</span>
  </div>
  <div style="display:flex;width:100%;">
    <div style="width:30%;">
      <div class="data-container">
        <span class="title-container">箱体</span>
        <section style="flex-grow: 1;">
         
          <div class="product-row" style="display: inline;">
            <span class="product-tag">  
              <span  >目标: </span><br/>
              <span >实际:</span>
            </span>
          </div>
          <div class="product-row" style="display: inline;">
            <span class="product-tag" *ngFor="let i of production">
              
              <span class="label-tag" style="font-size: 15px;width: 100px; color: white;text-align: center;" >{{i.subArea}} {{i.jph}}</span><br/>
              <span style="text-align: center;display: block;">
                <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">上{{i.unhours}}</span>/
                <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}"style="text-align: center;">下{{i.hours}}</span>
              </span>
            </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 150px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 200px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:40%;">
      <div class="data-container">
        <span class="title-container">装配</span>
        <section style="flex-grow: 1;">
          
            <span class="product-tag">  
              <span  >目标: </span><br/>
              <span >实际:</span>
            </span>
            <marquee behavior="scroll" direction=left style="float: right;"  scrollamount="5"width = '80%'>
          <div class="product-row"style="display: inline;" >
            <span class="product-tag" *ngFor="let i of production3">
              <span class="label-tag" style="font-size: 15px;width: 100px; color: white;text-align: center;" >{{i.subArea}} {{i.jph}}</span><br/>
            <span style="text-align: center;display: block;">
              <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">上{{i.unhours}}</span>/
              <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}"style="text-align: center;">下{{i.hours}}</span>
            </span>
            </span>
          </div>
        </marquee>
        </section>
        <section style="flex-grow: 3;height: 150px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 200px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:30%;">
      <div class="data-container">
        <span class="title-container">曲轴</span>
        <section style="flex-grow: 1;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">  
              <span  >目标: </span><br/>
              <span >实际:</span>
            </span>
          </div>
          <div class="product-row"style="display: inline;">
            <span class="product-tag" *ngFor="let i of production2">
              <span class="label-tag" style="font-size: 15px;width: 100px; color: white;text-align: center;" >{{i.subArea}} {{i.jph}}</span><br/>
            <span style="text-align: center;display: block;">
              <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">上{{i.unhours}}</span>/
              <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}"style="text-align: center;">下{{i.hours}}</span>
            </span>
          </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 150px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow2.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 200px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory2.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

  </div>
  <div class="msg-container">
    <marquee behavior="scroll" direction=left>
      <strong>
        <span *ngFor="let i of alarmMessage" style="margin-left: 10px;">{{i}}</span>
      </strong>
    </marquee>
  </div>
</div>